<template>
  <div class="usage-chart">
    <div class="chart-title">
      设备使用率曲线
    </div>
    <div id="usageChart" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'UsageChart',
  data() {
    return {
      usageChart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initUsageChart();
    });
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    if (this.usageChart) {
      this.usageChart.dispose();
      this.usageChart = null;
    }
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    initUsageChart() {
      const chartContainer = document.getElementById('usageChart');
      if (!chartContainer) return;

      if (!this.usageChart) {
        this.usageChart = echarts.init(chartContainer);
      }

      const option = {
        grid: {
          top: 10,
          left: 30,
          right: 20,
          bottom: 30
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['3.30', '3.31', '4.1', '4.2', '4.3', '4.4', '4.5'],
          axisLine: { lineStyle: { color: 'rgba(255,255,255,0.2)' } },
          axisLabel: { color: '#8f9bb3' }
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 100,
          interval: 25,
          axisLine: { lineStyle: { color: 'rgba(255,255,255,0.2)' } },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)',
              type: 'dashed'
            }
          },
          axisLabel: {
            color: '#8f9bb3',
            formatter: '{value}'
          }
        },
        series: [{
          data: [90, 80, 10, 60, 45, 25, 50],
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 6,
          lineStyle: {
            color: '#00a0e9',
            width: 2
          },
          itemStyle: {
            color: '#00a0e9',
            borderWidth: 2,
            borderColor: '#fff'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(0,160,233,0.3)' },
              { offset: 1, color: 'rgba(0,160,233,0.1)' }
            ])
          }
        }]
      };

      this.usageChart.setOption(option);
    },

    handleResize() {
      if (this.usageChart) {
        this.usageChart.resize();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import './mixins/cardStyles.scss';

.usage-chart {
  height: calc(35% - 6px);
  @include card-base-style;

  .chart-title {
    @include card-title-style;
  }

  #usageChart {
    flex: 1;
    height: calc(100% - 40px) !important;
    min-height: 0;
    padding: 10px;
  }
}
</style>
